<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <link type="image/x-icon" href="//gw.alicdn.com/tfs/TB1gRomUlr0gK0jSZFnXXbRRXXa-200-200.png" rel="shortcut icon">
        <title>嵌入模式测试页</title>
    </head>
    <body>
        <div>
            some other text
            <button style="margin-left: 100px;" id="destroy-rd">销毁设计器</button>
            <button style="margin-left: 10px;" disabled id="setup-rd">安装设计器</button>
        </div>
        <div style="display:flex;">
            <div style="width:200px">
                left
            </div>
            <div id="app" class="app" style="width:1000px;height:600px;border:solid 1px #ccc;position: relative;overflow: hidden;">
                <div style="display: flex;align-items: center;justify-content: center; height: 100%;">
                    这里可以放一个加载动画...
                </div>
            </div>
            <div>
                right
            </div>
        </div>
        <div>
            <input placeholder="外部输入框测试" />
            bottom text
        </div>
        <script type="text/javascript" src="dist/mini.js?v=202103151021"></script>
        <script>
        let setup=()=>{
                designer({
            version:'202103151021',
                    rootId:'app',
                    getImageUrl:'./apis/images.json',
                    getFieldUrl:'./apis/fields.json',
                    //getTemplateUrl:'./apis/example.json',
                    helpUrl:'//github.com/xinglie/report-designer/issues'
                });
            };
            let setupBtn=document.getElementById('setup-rd');
            let destroyBtn=document.getElementById('destroy-rd');
            setupBtn.addEventListener('click',()=>{
                setup();
                setupBtn.disabled=true;
                destroyBtn.disabled=false;
            });
            destroyBtn.addEventListener('click',()=>{
                designer.destroy();
                destroyBtn.disabled=true;
                setupBtn.disabled=false;
            });
            setup();
        </script>
    </body>
</html>
